/*
 * @Author: 谭必清
 * @Date: 2024-09-06 13:33:59
 * @LastEditors: 谭必清
 * @LastEditTime: 2024-09-06 14:49:15
 * @FilePath: /message-board/css/index.css
 * Copyright (c) 2020 - 2024 by TanBQ., All Rights Reserved.
 */
#app {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

info {
    font-size: 3rem;
    text-align: center;
    font-weight: 900;
    animation: init 2s ease-in-out;
}

typing {
    /* 设置该样式的行内显示 */
    display: block;

    /* 字体相关 */
    width: 13em;
    font-family: monospace;
    font-size: 2em;
    font-weight: 900;

    /* white-space: normal; */
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;

    /* 动画相关 */
    animation: typing steps(26) 2s, blink .7s step-end infinite alternate;
}

@keyframes init {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes typing {
    from {
        width: 0;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}